<template>
  <div class="shop">
    <el-button-group>
      <el-button @click="changeStatus(0)">全部</el-button>
      <el-button @click="changeStatus(7)">近7天</el-button>
      <el-button @click="changeStatus(15)">近15天</el-button>
      <el-button @click="changeStatus(30)">近30天</el-button>
    </el-button-group>

    <!--搜索-->
    <div class="search">
      <el-input class="input" v-model="form.keywords" placeholder="输入订单编号搜索" clearable></el-input>
      <el-button type="primary" @click="searchShop">搜索</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width:100%"
      max-height="600"
      class="shop_table_list"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="时间" prop="created_at" width='140'></el-table-column>
      <el-table-column label="类型|支付单号" width='240'>
        <template slot-scope="scope">
          <p v-if="scope.row.type == 1">订单入账 {{scope.row.order_no}}</p>
          <p v-if="scope.row.transaction_type == 5">拼团退还 {{scope.row.order_no}}</p>
       
        </template>
      </el-table-column>
      <el-table-column label="订单类型">
         <template slot-scope="scope">
             <p v-if='scope.row.order_type==1'>爆品商品</p>
             <p v-if='scope.row.order_type==5'>现金券</p>
             <p v-if='scope.row.order_type==10'>拼团</p>
             <p v-if='scope.row.order_type==15'>会员专享商品</p>
             <p v-if='scope.row.order_type==20'>优惠买单</p>
             <p v-if='scope.row.order_type==25'>普通商品</p>
             <p v-if='scope.row.order_type==30'>会员充值</p>
         </template>
      </el-table-column>
      <el-table-column label="所属小店" prop='shop_name' width='140'></el-table-column>
      <el-table-column label="流水（元）">
        <template slot-scope="scope">
           <p v-if='scope.row.actual_amount > 0'> + ¥ {{scope.row.actual_amount}}</p>
           <p v-if='scope.row.actual_amount < 0'> - ¥ {{scope.row.actual_amount}}</p>
           <p v-if='scope.row.actual_amount == 0'>  ¥ {{scope.row.actual_amount}}</p>
           <p v-show="!scope.row.actual_amount">---</p>
        </template>
      </el-table-column>
      <el-table-column label="收益（元）" prop='commission_value'>
           <template slot-scope="scope">
             <p v-if='scope.row.commission_value'> ¥ {{scope.row.commission_value}}</p>
             <p v-else>---</p>
           </template>
      </el-table-column>
      <el-table-column label="状态">
         <template slot-scope="scope">
            <p v-if='scope.row.status == 1'>未结算</p>
            <p v-if='scope.row.status == 5'>已结算</p>
            <p v-if='scope.row.status == 10'>已取消</p>
         </template>
      </el-table-column>
      <el-table-column label="操作" fixed='right'>
        <template slot-scope="scope">
          <el-button size ='mini' type="danager" @click="watchRecordDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
   
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>

  <jdialog
      title="交易信息详情"
      :visible.sync="isShowRecordDetail"
      width="800px">
     <record-detail :visible="isShowRecordDetail" :currentId="currentId" @close="isShowRecordDetail = false" @func="cancelShowRecordDetail"></record-detail> 
    </jdialog>  
    
  </div>
</template>

<script>
import recordDetail from './record_detail'
import {shopTransactionList} from '@/api/finance'
export default {
   components:{
    recordDetail
  },
    name:'record',
  data() {

    return {
      form:{
       keywords: "",
       day:'',
      page:1,
      size:20,
      },
      total:0,
      isShowRecordDetail:false,
      currentId:'',
      tableData: []
    };
  },
  mounted(){
     this.getshopTransactionListData()
  },
  methods: {
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    searchShop() {
      //根据关键词搜索
      this.getshopTransactionListData();
    },
    changeStatus(type){
      if(type === 0){
        this.form.day = '';
      }else{
        this.form.day = type;
      }
      this.getshopTransactionListData();
    },
    watchRecordDetail(id) {
      this.currentId = id;
      this.isShowRecordDetail = true;
    },
    cancelShowRecordDetail(){
      this.isShowRecordDetail = false;
    },
     handleSizeChange(val) {
      this.form.size = val;
      this.pageChange(1);
    },
    pageChange(page) {
      this.form.page = page;
      this.getshopTransactionListData()
    },
    async getshopTransactionListData(){
       let res = await shopTransactionList(this.form)
       console.log(res)
       if(res.code === 10000){
             this.tableData = res.data.data;
             this.total = res.data.total;
       }else{
            this.$message.error(res.message)
       }
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .pagination{
    float: right;
  }
  .shop_table_list {
    margin-top: 20px;
  }
   .record_baseInfo{
     border-top: 1px solid red;
   
   }
  .search {
    float: right;
    .input {
      width: 200px;
    }

    .addBtn {
      position: absolute;
      right: 50px;
      top: 20px;
    }
  
  }
}
</style>